<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>拖拽事件</title>
    <style>
        div {
            width: 500px;
            height: 500px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <!-- 标签的拖拽由一个属性draggable来控制，值为true则可以拖拽，否则表示不能拖拽，大部分标签默认是不可拖拽的，只有个别标签可以被拖拽,例如图片和a标签 -->
    <a href="http://www.baidu.com">百度一下</a>
    <br>
    <a draggable="false" href="http://www.baidu.com">不能被拖走的百度一下</a>
    <img src="./img.jpg" alt="">
    <h1 draggable="true">拖我啊</h1>
    <h1>我不能被拖走</h1>
    <div dropzone="true"></div>
</body>

</html>
<script>
    const h1 = document.querySelector('h1');
    // 定义变量存储当前正在拖拽的元素
    let dragEl;
    // 开始拖拽：当鼠标按下并开始移动触发
    document.ondragstart = function (e) {
        // 修改拖拽变量为当前事件对象
        dragEl = e.target;
        // console.log('拖拽事件开始了~~');
    }
    // 结束拖拽：当拖拽结束时触发
    h1.ondragend = function (e) {
        console.log('拖拽结束了');
    }
    // 拖拽进行时
    h1.ondrag = function (e) {
        console.log('正在拖拽');
    }

    // 以上三个都是针对于拖拽的元素本身
    // 关于拖拽范围的元素事件
    const div = document.querySelector('div');
    // 拖入事件：把一个能拖拽的元素拖入事件目标时触发
    div.ondragenter = function (event) {
        console.log('有东西进来了，让我看看是谁', dragEl);
    }
    // 拖出事件：把一个能拖拽的元素拖出事件目标时触发
    div.ondragleave = function(){
        console.log('拖拽的东西出去了');
    }
    // 拖拽悬停事件：当一个能拖拽的元素悬停在目标元素上时触发
    div.ondragover = function(e){
        e.preventDefault();
        // console.log('有元素在内部被拖拽');
    }
    // 丢下事件：把一个能拖拽的元素在目标元素上松开时触发
    div.ondrop = function(e){
        console.log('丢下了一个元素');
        div.append(dragEl);
    }
</script>